<template>
  <div class="detail-base">
    <div class="drawer-head pb16" @click="back">
      <p class="chevron-left">
        <icon-font name="chevron-left" size="18px" />
      </p>
      <h3>返回</h3>
    </div>
    <t-card title="产品详情" :bordered="false" class="info-block">
      <t-descriptions>
        <t-descriptions-item label="仓库名称">
          <span slot="content">
            {{ info.warehouse_name }}
          </span>
        </t-descriptions-item>
        <t-descriptions-item label="产品图片">
          <span slot="content">
            <div class="flex justify-start">
              <t-image-viewer v-if="info.product_thumb" :images="[info.product_thumb]" :closeOnEscKeydown="false">
                <template #trigger="{ open }">
                  <div class="tdesign-demo-image-viewer__ui-image" @click="open">
                    <p class="prod-img">
                      <img alt="test" :src="info.product_thumb"/>
                    </p>
                    <div class="tdesign-demo-image-viewer__ui-image--hover">
                      <browse-icon size="1.4em"/>
                    </div>
                  </div>
                </template>
              </t-image-viewer>
              <span v-else class="no-img" style="margin: 0"></span>
            </div>
          </span>
        </t-descriptions-item>
        <t-descriptions-item label="产品名称">
          <span slot="content">
            <p>{{ info.product_title }}</p>
          </span>
        </t-descriptions-item>
        <t-descriptions-item label="产品状态">
          <span slot="content" :class="{
            ['success']: info.product_status === 1,
            ['danger']: info.product_status === 0,
            ['warning']: info.product_status === -1,
          }">
            <i></i>
            {{ info.product_status === -1 ? '作废' : info.product_status === 0 ? '下架' : '上架' }}
          </span>
        </t-descriptions-item>
        <t-descriptions-item label="产品数量">
          <span slot="content">
            <p>{{ info.quantity }}{{ info.unit_title }}</p>
          </span>
        </t-descriptions-item>
        <t-descriptions-item label="备注">
          <span slot="content">
            <p>{{ info.remark ? info.remark : '暂无备注' }}</p>
          </span>
        </t-descriptions-item>
      </t-descriptions>
    </t-card>

    <t-card title="历史追朔" class="container-base-margin-top" :bordered="false">
      <t-table
        rowKey="id"
        :data="lists"
        :columns="columns"
        :stripe="stripe"
        :bordered="bordered"
        :hover="hover"
        :size="size"
        :max-height="maxHeight"
        :table-layout="tableLayout ? 'auto' : 'fixed'"
        :showHeader="showHeader"
        cellEmptyContent="-"
        resizable
        :loading="loading"
        @page-change="pageChange"
        :pagination="pagination"
        :selected-row-keys="selectedRowKeys"
      >
        <template #title-slot-unit_price>
          <p>价格</p>
        </template>
        <template #unit_price="{row}">
          <p class="item-title">￥{{row.unit_price ? row.unit_price : '0.00'}}</p>
          <t-tag v-if="row.record_type === 'RK'" variant="light" shape="round" theme="success">{{ orderType[row.record_type] }}</t-tag>
          <t-tag v-if="row.record_type === 'CK'" variant="light" shape="round" theme="primary">{{ orderType[row.record_type] }}</t-tag>
          <t-tag v-if="row.record_type === 'DB'" variant="light" shape="round" theme="warning">{{ orderType[row.record_type] }}</t-tag>
        </template>
      </t-table>
    </t-card>
  </div>
</template>
<script>
import { prefix } from '@/config/global';
import model from '@/service/service-detail-base';
import { IconFont, BrowseIcon } from 'tdesign-icons-vue';
import {warehouse_order_product_listApi, warehouse_product_stockDetailApi} from "@/api/warehouseInventory";
import {storeProductDetailApi, storeProductLogApi} from "@/api/inventory";

export default {
  name: 'DetailBase',
  components: { IconFont, BrowseIcon },
  data() {
    return {
      prodId: '', // 产品id
      baseInfoData: model.getBaseInfoData(),
      orderId: '',
      params: {
        id: '', // 库存ID
        limit: 10, //页数 必需 示例值: 10
        page: 1, // 页码 必需 示例值: 1
        status: '', // 状态（-1作废；1启用）
        start_time: '', // 日期范围，yyyy-MM-dd
        end_time: '', // 日期范围，yyyy-MM-dd
      },
      info: {},

      record_type: '',
      orderType: {
        RK: '入库价',
        CK: '出库价',
        DB: '调拨价',
      },

      lists: [],
      size: 'medium',
      tableLayout: false,
      stripe: false,
      bordered: false,
      hover: true,
      showHeader: true,
      columns: [
        {colKey: 'record_no', title: '订单编号', width: 280,},
        //{colKey: 'record_type_text', title: '订单类型', width: 140,},
        {colKey: 'quantity', title: '数量', width: 120,},
        {colKey: 'unit_price', title: 'title-slot-unit_price', width: 180,},
        {colKey: 'creation_time', title: '订单日期', width: 240,},
        {colKey: 'remark', title: '备注', ellipsis: true},
      ],
      selectedRowKeys: [],
      pagination: {
        defaultCurrent: 1,
        defaultPageSize: 10,
      },
      maxHeight: 472,
      loading: false,
    };
  },
  mounted() {
    const { prodId } = this.$route.query
    this.prodId = prodId
    this.params.id = prodId
    this.getInfo()
  },
  methods: {
    // 返回
    back() {
      this.$router.go(-1)
    },
    getInfo() {
      storeProductDetailApi(this.prodId).then(res=> {
        this.info = res.data
        this.getData()
      }).catch(err=> {
        console.log('err', err)
      })
    },
    getData() {
      this.params.page = 1
      this.getDetailsList()
    },
    // 切换分页
    pageChange(pageInfo) {
      const {current, defaultCurrent, defaultPageSize,} = pageInfo
      this.pagination.defaultCurrent = current
      this.getDetailsList()
    },
    getDetailsList() {
      storeProductLogApi(this.params).then(res=> {
        this.lists = res.data
        const data = res.data[0]
        if (data) {
          this.record_type = data.record_type
        }
        this.pagination.total = res.count
      }).catch(err=> {
        console.log('err', err)
      })
    }
  },
};
</script>
<style lang="less" scoped>
@import '@/style/variables.less';

.detail-base {
  /deep/ .t-card {
    padding: 8px;
  }

  /deep/ .t-card__title {
    font-size: 20px;
    font-weight: 500;
  }

  &-info-steps {
    padding-top: 12px;
  }
}

.item-title {
  font-weight: 500;
}

.item-sn {
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  text-align: left;
  color: rgba(0, 0, 0, 0.6);
}

.info-block {
  span {
    overflow: hidden;
    //white-space: nowrap;
    //text-overflow: ellipsis;
    //margin-left: 24px;
  }

  i {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: var(--td-radius-circle);
    background: var(--td-success-color-5);
  }

  .inProgress {
    color: var(--td-success-color-5);
  }


  .success {
    color: var(--td-success-color-5);

    i {
      background: var(--td-success-color-5);
    }
  }

  .danger {
    color: var(--td-error-color-5);

    i {
      background: var(--td-error-color-5);
    }
  }

  .warning {
    color: var(--td-warning-color-5);

    i {
      background: var(--td-warning-color-5);
    }
  }

  .pdf {
    color: var(--td-brand-color);

    &:hover {
      cursor: pointer;
    }
  }
}

.dialog-info-block {
  .info-item {
    padding: 12px 0;
    display: flex;

    h1 {
      width: 84px;
      font-family: PingFangSC-Regular;
      font-size: 14px;
      color: var(--td-text-color-secondary);
      text-align: left;
      line-height: 22px;
    }

    span {
      margin-left: 24px;
    }

    i {
      display: inline-block;
      width: 8px;
      height: 8px;
      border-radius: var(--td-radius-circle);
      background: var(--td-success-color-5);
    }

    .green {
      color: var(--td-success-color-5);
    }

    .blue {
      color: var(--td-brand-color);
    }
  }
}

</style>
